<template>
	<div>
		<div>
			身高（m）：<el-input v-model="height" placeholder="请输入身高" style="width: 300px;"></el-input>
			体重（kg）：<el-input v-model="weight" placeholder="请输入体重" style="width: 300px;"></el-input>
		</div>
		<div>
			<el-button type="primary" @click="count()">计算BMI并生成推荐食谱</el-button>
			<el-button @click="reset()">重置</el-button>
		</div>
		<!--  -->
		<div v-show="this.showOff">
			<!-- 食物数据展示 -->
			<div>
				<el-table :data="pageInfo.list" style="width: 100%;" :row-class-name="tableRowClassName">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="desc" label="食谱介绍" width="260"></el-table-column>
					<el-table-column prop="breakfast" label="早餐搭配" width="140"></el-table-column>
					<el-table-column prop="lunch" label="午餐搭配" width="140"></el-table-column>
					<el-table-column prop="dinner" label="晚餐搭配" width="140"></el-table-column>
					<el-table-column prop="cal" label="热量(KJ)" width="75"></el-table-column>
					<el-table-column prop="car" label="碳水(g)" width="70"></el-table-column>
					<el-table-column prop="protein" label="蛋白质(g)" width="80"></el-table-column>
					<el-table-column prop="fat" label="脂肪(g)" width="70"></el-table-column>
				</el-table>
			</div>
			<!-- 分页按钮 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageInfo.pageNum" :page-sizes="[2, 4]" :page-size="pageInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
				</el-pagination>
			</div>
		</div>
		
	</div>

</template>

<script>
	export default {
		created() {
			this.open4();
		},
		data() {
			return {
				height: '',
				weight: '',
				bmi: '',
				//
				tableData: [],
				currentPage: 1,
				pageSize: 2,
				pageInfo: {},
				//
				showOff: false
			}
		},
		methods: {
			//消息弹出框
			open4() {
				this.$notify({
					title: '食谱推荐',
					message: '请输入身高和体重，系统将会自动计算您的BMI指数并据此向您推荐适合的食谱',
					position: 'top-left'
				});
			},
			//计算BMI指数
			count(){
				//计算BMI并展示
				this.bmi = parseFloat((this.weight / this.height / this.height)).toFixed(2);;
				let str = '';
				if(this.bmi < 18.5){
					str = '很遗憾，您的bmi指数为：' + this.bmi+ '，低于正常范围，急需补充营养。点击确定查看系统为您推荐的食谱';
					this.showOff = true; //显示食谱展示框
				}else if(this.bmi >= 18.5 && this.bmi <= 23.9){
					str = '恭喜您，您的bmi指数为：' + this.bmi + '，处于正常范围，请继续保持。点击确定查看系统为您推荐的食谱';
					this.showOff = true; //显示食谱展示框
				}else if(this.bmi > 23.9){
					str = '很遗憾，您的bmi指数为：' + this.bmi + '，高于正常范围，过高的bmi会让身体超负荷运转。点击确定查看系统为您推荐的食谱';
					this.showOff = true; //显示食谱展示框
				}else{
					str = '您的输入有误，请重新输入'
				}
				alert(str);
				
				this.getDietList();
				
			},
			//重置方法
			reset(){
				this.height = '';
				this.weight = '';
				this.showOff = false;
			},
			/* 隔行换色方法 */
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return 'warning-row';
				} else if (rowIndex % 2 == 0) {
					return 'success-row';
				}
				return '';
			},
			/* 分页方法 */
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getDietList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getDietList();
			},
			//发送ajax封装成方法
			getDietList(){
				//发送ajax
				this.axios.get("http://localhost:8080/diets/cookbook/" + this.bmi + "/" + this.currentPage + "/" + this.pageSize).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res.data.data.list);
						this.pageInfo = res.data.data;
					})
			}
		}
	}
</script>
